<template>
  <div class="container">
    <el-form
      :inline="true"
      :model="partnerform1"
      ref="partnerform1"
      class="demo-form-inline"
    >
      <el-form-item label="型号搜索">
        <el-input v-model="partnerform1.name" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="app-container">
      <!-- 角色管理内容 -->
      <div class="role-operate">
        <el-button
          @click="newAndChange('新建')"
          size="mini"
          icon="el-icon-circle-plus-outline"
          style="background-color: #ff8437; color: #fff"
          >新建</el-button
        >
      </div>
      <el-table :data="partnerList">
        <!-- 放置列 -->
        <el-table-column
          prop="index"
          align="center"
          width="50px"
          label="序号"
        />
        <el-table-column prop="name" align="center" label="型号名称" />
        <el-table-column prop="model" align="center" label="型号编码" />
        <el-table-column align="center" label="设备图片">
          <template v-slot="{ row }">
            <el-avatar :size="30" :src="row.image" />
          </template>
        </el-table-column>
        <el-table-column prop="vmRow" align="center" label="货道行" />
        <el-table-column prop="vmCol" align="center" label="货道列" />
        <el-table-column
          prop="channelMaxCapacity"
          align="center"
          label="设备容量"
        />
        <el-table-column align="center" width="200px" label="操作">
          <!-- 放置操作按钮 -->
          <template v-slot="{ row }">
            <el-button
              size="mini"
              type="text"
              @click="newAndChange('修改', row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              style="color: red"
              @click="del(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页组件 -->
      <el-row
        type="flex"
        style="height: 60px"
        align="middle"
        justify="space-between"
      >
        <el-col :span="12"
          ><span style="font-size: 13px; color: #999; padding-left: 12px"
            >共{{ totalcount }}条记录 第{{ pageParams.pageIndex }}/{{
              totalpage
            }}页</span
          ></el-col
        >
        <el-col :push="12">
          <el-button-group>
            <el-button
              type="primary"
              @click="innPage"
              size="mini"
              :disabled="pageParams.pageIndex == 1"
              icon="el-icon-arrow-left"
              style="
                background-color: #d5ddf8;
                color: #000;
                margin-right: 12px;
                border: none;
              "
              >上一页</el-button
            >
            <el-button
              type="primary"
              @click="addPage"
              size="mini"
              :disabled="pageParams.pageIndex == this.totalpage"
              style="background-color: #d5ddf8; color: #000; border: none"
              >下一页<i class="el-icon-arrow-right el-icon--right"></i
            ></el-button>
          </el-button-group>
        </el-col>
      </el-row>

      <!-- 新增合作商的dialog -->
      <el-dialog
        :title="models"
        :visible.sync="dialogFormVisible"
        @close="closefn"
      >
        <el-form
          :model="addPartnerForm"
          :rules="rules"
          label-width="100px"
          ref="partnerform"
        >
          <el-form-item label="型号名称" prop="name">
            <el-input
              v-model="addPartnerForm.name"
              maxlength="10"
              show-word-limit
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="型号编码" prop="model">
            <el-input
              v-model="addPartnerForm.model"
              maxlength="15"
              show-word-limit
              placeholder="请输入（限制数字、字母、中划线、下划线）"
            ></el-input>
          </el-form-item>
          <el-form-item label="货道行数" prop="vmRow">
            <el-input-number
              v-model="addPartnerForm.vmRow"
              controls-position="right"
              placeholder="请输入"
              style="width: 80%; display: flex; flex-direction: column"
            >
            </el-input-number>
          </el-form-item>
          <el-form-item label="货道列数" prop="vmCol">
            <el-input-number
              v-model="addPartnerForm.vmCol"
              controls-position="right"
              placeholder="请输入"
              style="width: 80%; display: flex; flex-direction: column"
            >
            </el-input-number>
          </el-form-item>
          <el-form-item label="货道容量" prop="channelMaxCapacity">
            <el-input-number
              v-model="addPartnerForm.channelMaxCapacity"
              controls-position="right"
              placeholder="请输入"
              style="width: 80%; display: flex; flex-direction: column"
            >
            </el-input-number>
          </el-form-item>
          <el-form-item label="设备图片" prop="image">
            <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :http-request="myRequest"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="addPartnerForm.image"
                :src="addPartnerForm.image"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过100kb</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="quitfn">取 消</el-button>
          <el-button type="primary" @click="submitfn">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import COS from "cos-js-sdk-v5";
import {
  getvmtype,
  uploadVmType,
  uploadimage,
  delVm,
  changeVmType,
} from "@/api/mechian";
export default {
  name: "Node",
  components: {},
  data() {
    return {
      models: "新建",
      dialogFormVisible: false,
      totalcount: "",
      totalpage: "",

      pageParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      addPartnerForm: {
        name: "",
        model: "",
        image: "",
        vmCol: "",
        vmRow: "",
        channelMaxCapacity: "",
      },
      partnerform1: {
        name: "",
      },
      nodelist: {},
      partnerList: [],
      rules: {
        name:[{required: true}],
        model: [{required: true}],
        image:[{required: true}],
        vmCol: [{required: true}],
        vmRow:[{required: true}],
        channelMaxCapacity:[{required: true}],
      },
    };
  },
  async created() {
    this.getvmtype();
  },
  methods: {
   // 覆盖原有的请求，改为自己的上传
    async myRequest({ file }) {
      try {
        const myPic = new FormData()
        myPic.set('fileName', file)
        console.log(myPic);
        const res = await uploadimage(myPic)
        console.log(res)
        // 发送成功后进行图片的回显
       this.addPartnerForm.image = res
      } catch (error) {
        console.log(error)
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = [
        "image/jpeg",
        "image/png"
      ].includes(file.type);
      const isLt100k = file.size / 1024 < 100; // 100k

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG PNG 格式!");
      }
      if (!isLt100k) {
        this.$message.error("上传头像图片大小不能超过 100kb!");
      }
      return isJPG && isLt100k;
    },
    //下一页
    addPage() {
      this.pageParams.pageIndex++;
      this.getvmtype();
    },
    // 上一页
    innPage() {
      this.pageParams.pageIndex--;
      this.getvmtype();
    },
    async getvmtype() {
      const res = await getvmtype(
        this.pageParams.pageIndex,
        this.pageParams.pageSize,
        this.partnerform1.name
      );
      this.partnerList = res.currentPageRecords;
      this.totalpage = res.totalPage;
      this.totalcount = res.totalCount;
      this.partnerList.forEach((item, index) => {
        this.$set(
          item,
          "index",
          this.pageParams.pageSize * (this.pageParams.pageIndex - 1) + index + 1
        );
      });
    },
    search() {
      this.getvmtype();
    },
    closefn() {
      this.$refs.partnerform.resetFields();
      (this.addPartnerForm = {
        name: "",
        image: "",
        model: "",
        vmCol: "",
        vmRow: "",
        channelMaxCapacity: "",
      }),
        (this.dialogFormVisible = false);
    },
    quitfn() {
      this.closefn();
    },
    submitfn() {
      this.$refs.partnerform.validate(async (right) => {
        if (right) {
          if (!this.addPartnerForm.typeId) {
            await uploadVmType(this.addPartnerForm);
            this.$message.success("添加成功");
            this.pageParams.pageIndex = 1;
            this.getvmtype();
            this.closefn();
          } else {
            const res = await changeVmType(
              {
                image: this.addPartnerForm.image,
                model: this.addPartnerForm.model,
                name: this.addPartnerForm.name,
                vmCol: this.addPartnerForm.vmCol,
                vmRow: this.addPartnerForm.vmRow,
                channelMaxCapacity: this.addPartnerForm.channelMaxCapacity,
              },
              this.addPartnerForm.typeId
            );
            if (res == true) {
              this.$message.success("修改成功");
              this.closefn();
              this.getvmtype();
            }
          }
        } else {
          this.$message.error(new Error());
        }
      });
    },
    //新建and修改
    async newAndChange(model, row) {
      if (model == "新建") {
        this.models = '新建设备';
        this.dialogFormVisible = true;
      } else {
        this.models = '修改设备';
        // console.log(row);
        this.addPartnerForm = row;
        this.dialogFormVisible = true;
      }
    },
   async del(row) {
    this.$confirm('确认删除？').then(
     async()=>{ 
      await delVm(row.typeId)
    if(this.partnerList.length===1){this.pageParams.pageIndex--}
    this.getvmtype()
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.role-operate {
  padding: 10px;
}
::v-deep .el-dialog {
  border-radius: 10px;
  padding: 20px;
  width: 50%;
  .dialog-footer {
    margin-top: -30px;
  }
  .area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .title {
    width: 50%;
    margin-bottom: 20px;
    .right {
      width: 80%;
      margin-left: 10px;
      .el-table {
        margin-top: -15px;
      }
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #dd2626;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>
